<template>
  <div class="app-container">
    <!-- form begin -->
    <!-- <el-form ref="queryForm" label-width="120px" class="div-header" :model="queryForm" size="mini">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="empCode" prop="empCode">
            <el-input v-model="queryForm.empCode" placeholder="empCode" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="年月" prop="beginDate">
            <el-date-picker v-model="queryForm.yrmonth" style="width:100%;" type="month" placeholder="选择年月" value-format="yyyy-MM" />
          </el-form-item>
        </el-col>
      </el-row>
      <div style="text-align: center;padding-top: 5px;padding-bottom: 5px;">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList()"
        >查询</el-button>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-refresh"
          @click="resetForm('queryForm')"
        >重置</el-button>
      </div>
    </el-form> -->
    <!-- form end -->
    <div>
      <el-row :gutter="32" class="el-row">
        <!--月报 BEGIN-->
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-card class="box-card el-card">
            <div slot="header" class="clearfix" style="height: 30px">
              <h3 class="normal" >{{ monthlyReport }}
                <span style="float: right;" class="fontStyle"><a @click="routeToCallList(FirstDayOfMonth)">明细</a></span></h3>
            </div>
            <div v-for="item in monthReportList" :key="item.appName" class="component-item">
              <h4 class="appclass">{{ item.appName }}</h4>
              <li v-for="child in item.record" :key="child.apiName" class="nameStyle">{{ child.apiName }} ： <span style="color: black">{{ child.callCount }} 次</span></li>
            </div>
          </el-card>
        </el-col>
        <!--月报 END-->
        <!--周报 BEGIN-->
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <el-card class="box-card el-card">
            <div slot="header" class="clearfix" style="height: 30px">
              <h3 class="normal"> {{ weeklyNewspaper }}
                <span style="float: right;" class="fontStyle"><a @click="routeToCallList(FirstDayOfWeek)">明细</a></span>
              </h3>
            </div>
            <div v-for="item in weekReportList" :key="item.appName" class="component-item" :height="height">
              <h4 class="appclass">{{ item.appName }}</h4>
              <li v-for="child in item.record" :key="child.apiName" class="nameStyle">{{ child.apiName }} ： <span style="color: black">{{ child.callCount }} 次</span></li>
            </div>
          </el-card>
        </el-col>
        <!--周报 END-->
      </el-row>
    </div>
  </div>
</template>

<script>
import { getMonthReport, getWeekReport } from '@/api/report/report-service'
import Vue from 'vue'

export default {
  data() {
    return {
      height: 'calc(100% - 100px)',
      queryForm: {
        page: 1,
        limit: 10,
        empCode: '',
        empName: '',
        yrmonth: '',
        queryRange: '',
        appCode: '',
        sysCode: '',
        deptCode: '',
        apiName: '',
        beginDate: null,
        endDate: null
      },
      monthlyReport:"工作总结（月报)",
      weeklyNewspaper:"工作总结（周报)",
      FirstDayOfMonth: null,
      FirstDayOfWeek:null,
      monthReportList: [],
      weekReportList: [],
      reportDate: this.dateFormat('YYYY年mm月dd日', new Date())
    }
  },
  created() {
    this.FirstDayOfMonth = this.getFirstDayOfMonth()
    this.FirstDayOfWeek =  this.getFirstDayOfWeek()
    console.info("这个是月初="+this.FirstDayOfMonth)
    console.info("这个是周初="+this.FirstDayOfWeek)

  },
  mounted() {
    const queryRange = localStorage.getItem('queryRange')
    this.queryForm.queryRange = queryRange

    if (queryRange === 'all') {
      // donothing
    } else if (queryRange === 'dept') {
      try {
        this.queryForm.deptCode = localStorage.getItem('deptCode')
        this.monthlyReport = '部门工作总结（月报)'
        this.weeklyNewspaper ='部门工作总结（周报)'
      } catch (e) {
        console.log(e)
      }
    } else if (queryRange === 'person') {
      const empcode = localStorage.getItem('empCode')
      if (!empcode || empcode === '') {
        Vue.prototype.loginUser()
      }

      if (empcode) {
        this.queryForm.empCode = empcode
        this.monthlyReport = '个人工作总结（月报)'
        this.weeklyNewspaper ='个人工作总结（周报)'
      }
    }

    this.getList()
  },
  methods: {
    routeToCallList(FirstDay) {
      const queryRange = localStorage.getItem('queryRange')
      this.queryForm.queryRange = queryRange

      if (queryRange === 'all') {
      // donothing
      } else if (queryRange === 'dept') {
        this.$router.push({
          name:'call-list-dept', //  个人指定路由的名字
          params:{
          FirstDay:FirstDay,
          appPath: this.appPath = 1
        }
        })
      } else if (queryRange === 'person') {
        this.$router.push({
          name:'call-list-person', //  部门指定路由的名字
          params:{
          FirstDay:FirstDay,
          appPath: this.appPath = 1
        }
        })
      }
    },
    dateFormat(fmt, date) {
      let ret
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString() // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      }
      for (const k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
        }
      }
      return fmt
    },
    getList() {
      getMonthReport(this.queryForm).then(response => {
        this.monthReportList = response.data
        // 假loading 1秒后消失
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })

      getWeekReport(this.queryForm).then(response => {
        this.weekReportList = response.data
        // 假loading 1秒后消失
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
    },
    //时间格式化
     timeFormat(date) {
      if (!date || typeof(date) === "string") {
             this.error("参数异常，请检查...");
         }
       var y = date.getFullYear(); //年
       var m = date.getMonth() + 1; //月
       var d = date.getDate(); //日

       if(m < 9){
         m = '0'+ m
       }
       if(d < 9){
         d = '0'+ d
       }
       return y + "-"  + m + "-" + d;
   },
    //获取当月第一天
     getFirstDayOfMonth (date) {
       var date = new Date();
           date.setDate(1);
           return this.timeFormat(date);
       },
    //获取这周的周一
      getFirstDayOfWeek (date) {
        var date = new Date();
           var weekday = date.getDay()||7; //获取星期几,getDay()返回值是 0（周日） 到 6（周六） 之间的一个整数。0||7为7，即weekday的值为1-7

        date.setDate(date.getDate()-weekday+1);//往前算（weekday-1）天，年份、月份会自动变化

        return this.timeFormat(date);
       }
  }
}
</script>

<style scoped>
  /*.col_style{*/
    /*background-color: #fff;*/
    /*margin:16px;*/
  /*}*/
  /*.box-header{*/
    /*background: #36a9e1;*/
    /*color: #fff;*/
    /*font-size: 16px;*/
    /*overflow: hidden;*/
  /*}*/
  .component-item{
    /* min-height: 100px; */
    padding-bottom: 1px;
  }
  /*.img_style{*/
    /*height: 100%;*/
    /*width: 100%;*/
    /*border: 1px solid #2bd0cc;*/
  /*}*/
  .fontStyle{
    color: #2A7AFC;
    font-size: 16px;
    margin-top: 25px
  }
  .normal{ font-weight:normal}
  .appclass{color: #2A7AFC;font-weight:normal}
  /*.cardclass{*/
    /*height: calc(100% - 100px)*/
  /*}*/
  .nameStyle{
    color: #808080;
  }

  .el-row {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap
  }

  .el-card {
    min-width: 100%;
    height: 100%;
    margin-right: 20px;
    transition: all .5s;
  }
</style>
